<template>
	<view class="body-view">
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
			<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum' + item.id" :key="item.id - 1" @click="swichMenu(item.id - 1)">
				<view :class="currentTab == item.id - 1 ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{ item.name }}</text>
					<view class="menu-topic-bottom"><view class="menu-topic-bottom-color"></view></view>
				</view>
			</view>
		</scroll-view>
		<!-- 内容 -->
		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
			<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
				<view class="swiper-item">{{ item.content }}</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabs: [
				{
					id: 1,
					name: '推荐'
				},
				{
					id: 2,
					name: '交通交通'
				}
			],
			currentTab: 0,
			tabCurrent: 'tabNum1',
			// Tab切换内容
			swiperDateList: [
				{
					id: 1,
					content: '推荐'
				},
				{
					id: 2,
					content: '交通交通'
				}
			]
		};
	},
	onLoad() {},
	methods: {
		swichMenu(id) {
			this.currentTab = id;
			console.log(11, id);
			this.tabCurrent = 'tabNum' + id;
		},
		swiperChange(e) {
			console.log(22, e.detail.current);
			let index = e.detail.current;
			this.swichMenu(index);
		}
	}
};
</script>

<style scoped lang="scss">
.body-view {
	height: 100vh;
	width: 100%;
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	align-items: flex-start;
	justify-content: center;
}

.top-menu-view {
	display: flex;
	position: fixed;
	top: 100rpx;
	left: 0;
	white-space: nowrap;
	width: 100%;
	background-color: #ffffff;
	height: 86rpx;
	line-height: 86rpx;
	border-top: 1rpx solid #d8dbe6;

	.menu-topic-view {
		display: inline-block;
		white-space: nowrap;
		height: 86rpx;
		position: relative;

		.menu-topic-text {
			font-size: 30rpx;
			color: #303133;
			padding: 10rpx 40rpx;
		}

		// .menu-topic-act {
		// 	margin-left: 30upx;
		// 	margin-right: 10upx;
		// 	position: relative;
		// 	height: 100%;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// }

		.menu-topic-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;

			.menu-topic-bottom-color {
				width: 40rpx;
				height: 4rpx;
			}
		}

		.menu-topic-act .menu-topic-bottom {
			display: flex;
			justify-content: center;
		}

		.menu-topic-act .menu-topic-bottom-color {
			background: #3d7eff;
		}
	}
}

.swiper-box-list {
	width: 100%;
	padding-top: 200rpx;
	flex: 1;
	background-color: #ffffff;
	.swiper-topic-list {
		width: 100%;
	}
}
</style>
